<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-06 11:23:18
 * @LastEditors: icymoon911 icymoon911@163.com
 * @LastEditTime: 2024-07-02 20:43:48
 * @FilePath: \ken147258.topayClient\src\views\other\system\basic-setting.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="search-container">
      <FormList :initForm="initSearchForm" v-model:formModel="searchForm"></FormList>
    </div>
    <el-card shadow="never" class="table-container">
      <comTable
        :data="tableDatasCom"
        :config="tableconfig"
        :tableHeader="tableHeader"
        v-loading="loading"
      >

      <template #type_com="{ row, index }">
              <span v-if="row.type == 1" style="color: darkorchid;">后台</span>
              <span v-else-if="row.type == 2" style="color: blue">商户</span>
              <span v-else-if="row.type == 3" style="color: green">码商</span>
              <span v-else style="color: gray;">-</span>
            </template>

      </comTable>

      <pagination
        v-if="tableDatasObj.paging.total > 0"
        v-model:total="tableDatasObj.paging.total"
        v-model:page="tableDatasObj.paging.page"
        v-model:limit="tableDatasObj.paging.limit"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { FormInstance } from "element-plus";
import { list } from "@/api/other/log";
import FormList from "@/components/FormList/index.vue";
import comTable from "@/components/comTable/comTable.vue";

const getFormatDate = inject("getFormatDate");
const defaultTime = new Date();

const searchForm = ref({});
const initSearchForm = ref({
  // 表单标签位置
  // labelPosition: "right",
  formAttrs: {
    // 是否内联
    inline: true,
  },
  rowAttrs: {
    // 行内表单数量
    columnsNum: 4,
  },
  // 初始化表单字段
  initKeys: [
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "platform_user_id",
      // 表单属性
      formAttrs: {
        label: "操作者ID",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入操作者ID",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "name",
      // 表单属性
      formAttrs: {
        label: "行为描述",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入行为描述",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "input",
      // 唯一标识
      key: "ip",
      // 表单属性
      formAttrs: {
        label: "IP",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请输入IP",
        // 是否可清空
        clearable: true,
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "select",
      // 唯一标识
      key: "type",
      // 表单属性
      formAttrs: {
        label: "模块",
      },
      // 控制属性
      controlAttrs: {
        placeholder: "所有",
        // 是否可清空
        clearable: true,
      },
      // 选项
      options: [
        {
          // 标签
          label: "后台",
          // 值
          value: 1,
        },
        {
          // 标签
          label: "商户",
          // 值
          value: 2,
        },
        {
          // 标签
          label: "码商",
          // 值
          value: 3,
        }
      ],
    },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "start_time",
      // 表单属性
      formAttrs: {
        label: "开始时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择开始时间",
        type:"datetime",
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "date-picker",
      // 唯一标识
      key: "end_time",
      // 表单属性
      formAttrs: {
        label: "结束时间",
      },
      // 控制属性
      controlAttrs: {
        // 提示文本
        placeholder: "请选择结束时间",
        type:"datetime",
        value:defaultTime,
        // 是否可清空
        clearable: true,
        style: {
          width: "100%",
        },
      },
      // 控制事件
      controlOn: {},
    },
    {
      // 类型
      type: "buttons",
      // 按钮
      btns: [
        {
          // 文本
          text: "搜索",
          // 控制属性
          controlAttrs: {
            // 类型
            type: "primary",
            icon: "search",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: (e: Event, formRef: FormInstance, data: Array<object>) => {
              formRef.validate((valid) => {
                if (valid) {
                  console.log("fields", data);
                  tableDatasObj.value.paging.page = 1;
                  
                  let tempData = { ...data };
                  tableDatasObj.value.queryParams = tempData;

                  if (data.start_time) {
                    tempData.start_time = data.start_time.getTime() / 1000;
                  }
                  if (data.end_time) {
                    tempData.end_time = data.end_time.getTime() / 1000;
                  }
                  tableDatasObj.value.queryParams = tempData;

                  handleQuery(tableDatasObj.value.paging);
                }
              });
            },
          },
        },
        {
          // 文本
          text: "重置",
          // 控制属性
          controlAttrs: {
            icon: "refresh",
          },
          // 控制事件
          controlOn: {
            // 点击
            click: resetQuery,
          },
        },
      ],
    },
  ],
});

/** 重置查询 */
function resetQuery(e: Event, formRef: FormInstance, data: Array<object>) {
  // 重置表单
  formRef.resetFields();
  // 查询
  tableDatasObj.value.paging.page = 1;
  tableDatasObj.value.paging.limit = 20;
  tableDatasObj.value.queryParams = { ...searchForm.value };
  const params = {
    ...tableDatasObj.value.queryParams,
    ...data,
    ...tableDatasObj.value.paging,
  };

  handleQuery(params);
}

// 表*********************************************
const loading = ref(false);

const tableDatasObj = ref({
  list: [
    
  ],
  paging: {
    limit: 20,
    page: 1,
    total: 122,
  },
});
const tableDatasCom = computed(() => {
  // return tableDatasObj.value.list;

  return tableDatasObj.value.list.map((item: ProductListVO) => {

    // let type_com = '';
    // switch(item.type) {
    //   case 2:
    //     type_com = '商户';
    //     break;
    //   case 3:
    //     type_com = '码商';
    //     break;
    //   default: 
    //     type_com = '三方平台';
    //     break;
    // }

    return {
      ...item,
      // type_com: type_com,
      createtime_com: getFormatDate(item.createtime),
    };
  });

});



const tableconfig = {
  // tableHeight: 480, //表格高度
  isSelection: false, //显示复选框
  isRowClick: false, //使用行点击
  isStripe: true, //隐藏斑马纹，与背景色不可同时用
  isShowSummary: false, //显示共计
  isIndex: true, //自定义序号
  isNeedPagination: true, //是否需要分页
};
const tableHeader = [
  { label: "ID", prop: "id", width: 150 },
  { label: "模块", prop: "type_com", type:"slot", width: 150 },
  { label: "操作者ID", prop: "platform_user_id", width: 150 },
  { label: "操作行为", prop: "name", width: 200 },
  { label: "行为描述", prop: "msg", width: 280 },
  { label: "URL", prop: "url", minWidth: 200 },
  // { label: "IP", prop: "ip", width: 150 },
  { label: "操作时间", prop: "createtime_com", width: 200 },
  // {
  //   label: "操作",
  //   prop: "",
  //   title: "附件",
  //   btntag: "filetotal",
  //   btnText: "附件",
  //   type: "button",
  //   colWidth: 100,
  //   isSort: false,
  // },
];

/**
 * 查询
 */
function handleQuery(paging: { page: number; limit: number }) {
  loading.value = true;
  list({ ...tableDatasObj.value.paging, ...tableDatasObj.value.queryParams })
    .then(res => {
      tableDatasObj.value.list = res.list;
      tableDatasObj.value.paging.total = res.total;
    })
    .finally(() => (loading.value = false));
}
// 完*********************************************

onMounted(() => {
  tableDatasObj.value.queryParams = { ...searchForm.value };

  handleQuery(tableDatasObj.value.paging);
});
</script>

<style scoped></style>
